p{/*type选择器,元素选择*/
    background-color: aquamarine;  /*元素更改*/
}
.c1{/*class选择器,标签class属性选择*/
    background-color: aqua;
}
#p1{/*id选择器,元素选择*/
   background-color: antiquewhite;
}
/*  id>class>type  */

/*  css书写顺序:
    1· 浮动/display
    2· 盒子模型 margin border padding 宽高背景色
    3· 文字样式  */

* {/*通配符*/
    margin: 0;
    padding: 0;
}
#a1{
    font-weight: bold !important; /*字体加粗*/
    font-style: italic; /*字体倾斜*/
    font-family: 宋体,楷体; /*字体*/
    text-indent: 10px;/*文本缩进*/
    text-indent: 2em;/*文本缩进2字*/
    text-align: center; /*文本对齐*/
    text-decoration: none; /*修饰线 underline line-through overline（上划线）*/
    line-height: 1; /*行高 1倍*/
    background-color: chartreuse;
}
#a4{
    background-image: url("res/imgs/p1.png");
    background-repeat: repeat;/*平铺*/
    background-position: 1px 1px; /*位置*/
    height: 200px;
    width: 200px;
    display: block; /*转换为块状元素*/
}

#a5{
    width: 200px;
}
#a6{
    height: 70px;
    width: 400px;
    margin: 0 auto;/*版心居中*/
    background-color: chartreuse;
    border: 5px solid red; /*solid实线 dashed虚线 dotted点线*/
    border-top: 5px dotted red;
    padding: 10px 10px 10px 10px;/*上 右 下 左*/
    box-sizing: border-box;/*内减模式 影响padding和border*/
}
/*--------father son-------------------*/
#a7{
    background-color: blueviolet;
    width: 500px;
    height: 300px;
    overflow: hidden;/*用于解决子类margin塌陷问题*/

}
#a8{
    margin: 10px;
    background-color: blue;
    width: 400px;
    height: 250px;
    color: aqua;
}
/*伪元素*/
#a8::before{
    content: '伪元素前)';
    color: white;
}
#a8::after{
    content: '(伪元素后';
    color: white;
}
/*------------------------------------*/
/*后代选择器*/
#a2 p{
    color: blueviolet;
}
/*子代选择器*/
#a2 > p{
    color: blueviolet;
}
/*并集选择*/
#a2 , #a3 {
    color: blueviolet;
}
/*交集选择*/
#a2#a3{
    color: blueviolet;
}
/*伪类选择器 （鼠标悬停）*/
#a2 p:hover{
    color: red;
}
/*结构伪类选择器*/
li:nth-child(1){/*li元素第一个子类*/
    background-color: blueviolet;
}
/*--------------------------------------------*/
span{
    /*行内padding margin标签只能调左右位置*/
    line-height: 100px;/*行内元素调行高*/
}
/*---------------------浮动---------------------*/
#a9{
    width: 200px;
    float: left; /*用于图文环绕*/
}
#a10{

}
.b1{
    width: 100px;
    height: 100px;
}
#a11{
    background-color: brown;
    float: left; /*用于div同行*/
}
#a12{
    background-color: blue;
    float: left; /*用于div同行*/
}
#a13{
    height: 100px;
}
/*------------------------清除浮动---------------------*/
.top{
   margin: 0 auto;
    width: 1000px;
    background-color: pink;
    overflow: hidden;/* 1.父元素overflow清除浮动*/
}
.bottom{
    height: 100px;
    background-color: green;
}
.left{
    float: left;
    width: 200px;
    height: 100px;
    background-color: antiquewhite;
}
.right{
    float: right;
    width: 790px;
    height: 100px;
    background-color: aqua;
}

/* 2.额外标签清除浮动*/
.clearfix{/*子元素浮起时让下面元素不上移*/
    clear:both;
}

/* 3.伪元素清除浮动*/
.clearfix::after{
    content: '';
    display: block;
    clear: both;

    /*用于低版本浏览器：*/
    height: 0;
    visibility: hidden;
}

/* 4.双伪元素清除浮动*/
.clearfix::before,
.clearfix::after{
content: '';
    display: table;
}
.clearfix::after{
    clear: both;
}

/*-------------定位--------------------------*/
.box{/*相对定位*/
    position: relative; /*相对定位 不脱标*/
    width: 200px;
    height: 200px;
    left: 100px;/*相对原来位置移动*/ /*left覆盖right*/
    top: 100px;/*相对原来位置移动*/ /*top覆盖bottom*/
    background-color: peru;
}
.box2{/*绝对定位*/
    /*
    先逐层找已定位的父级，以此为参照物定位  （子绝父相）
    有父级，父级没定位，以浏览器窗口为参照物定位 */
    position: absolute; /*绝对定位 脱标 不占原位置*/
    width: 200px;
    height: 200px;
    left: 100px;/*相对（父级/浏览器页面）位置移动*/ /*left覆盖right*/
    top: 100px;/*相对（父级/浏览器页面）位置移动*/ /*top覆盖bottom*/
    z-index: 2; /*层级 高层在上*/
    background-color: coral;
}
.box3{/*固定定位*/
    position: fixed;/*固定定位 脱标 不占原位置*/
    background-color: brown;
    width: 100px;
    height: 100px;
    right: 0;
    bottom: 0;
}
/*------------------装饰-------------------------------------*/
/*基线元素垂直对齐*/
    /*浏览器把行内和行内块当具有基线的文字处理*/
#a14{
    width: 200px;
    vertical-align: middle; /*用于使基线对齐 图片垂直居中*/
}
#a15{
    vertical-align: middle; /*用于使基线对齐*/
}#a16{
     vertical-align: middle; /*用于使基线对齐*/
    width: 50px;
 }

/*基线元素（图片）垂直水平居中*/
#a18{
    width: 200px;
    vertical-align: middle; /*用于使基线对齐 图片垂直居中*/
}
 #a17{
     width: 600px;
     height: 600px;
     background-color: deeppink;
     line-height: 600px;
     text-align: center;/*图片水平居中*/
 }

 /*光标更改*/
.b2{
    height: 100px;
    width: 100px;
    float: left;
}
 #a20{
     background-color: darkgreen;
     cursor: pointer;
     overflow: hidden;/* 1.父元素overflow清除浮动*/

 }
#a21{
    background-color: dodgerblue;
    cursor: text;
}
#a22{
    background-color: gold;
    cursor: move;
}

/*圆角*/
#a23{
    background-color: darkcyan;
    border-radius: 10px 20px 30px 40px; /*左上 右上 右下 左下*/
}

/*溢出部分显示效果*/
#a24{
    background-color: lightgreen;
    /*visible可见 hidden不可见 scroll无论是否溢出显示滚动条 auto内容溢出显示滚动条*/
    overflow: auto;
}
/*隐藏效果*/
#a27{
    background-color: #f3f5f7;
}
#a26{
    width: 50px;
    background-color: lightskyblue;
    display: none; /*隐藏时不占位*/
    /*visibility: hidden; 隐藏时占位*/
}
#a25{
    background-color: lightsalmon;
}
#a25:hover #a26 {
    display: block;
}

/*透明*/
#a28{
    background-color: mediumspringgreen;
   width: 400px;
    height: 200px;
    float: left;
}
#a29{
    background-color: royalblue;
    opacity: 0.7;
    width: 400px;
    height: 100px;
}
